<template>
  <view class="header flex-direction-column">
    <view class="title">
      <view class="name">{{ props.info.active_name}}</view>
	   <view class="name2">{{ props.info.name}}</view>
    </view>
    <view class="group" v-if="props.info.active_type < 3">{{ props.info.brief }}</view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  info: {
    type: Object,
    default() {
      return {}
    }
  }
})

console.log(props.info)
</script>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  padding: 24rpx 26rpx 30rpx 26rpx;
  border-radius: 20rpx;
  .title {
    width: 100%;
    white-space: pre-wrap;
    display: inline-block;
    image {
      width: 86rpx;
      height: 36rpx;
      float: left;
      display: inline;
      margin-right: 12rpx;
    }
    .name {
      display: inline;
      height: 80rpx;
      line-height: 40rpx;
	  font-size: 28rpx;
	  font-family: PingFang SC;
	  font-weight: 400;
	  color: #000000;
	  opacity: 1;
    }
	.name2{
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 44rpx;
		color: #000000;
		opacity: 1;
		margin-top: 20rpx;
	}
  }
  .group {
    height: 50rpx;
    color: #777777;
    font-size: 28rpx;
    margin-top: 16rpx;
    line-height: 50rpx;
  }
}
</style>
